<template>
	<view class="news-container">
		<!-- 自定义tab栏 -->
		<news-nav-bar :tabIndex='tabIndex' :tabBars="tabBars" @change-tab='changeTab'></news-nav-bar>

		<!-- 关注列表 -->

		<view class="uni-tab-bar">
			<swiper :current="tabIndex"  class="swiper-box" :style="{height:swiperHeight+'px'}" @change="changeIndex">
				<!-- 关注 -->
				<swiper-item class="swiper-item">
					<scroll-view class="scroll-v list scroll-Y" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
						<view class="common-list ">
							<block v-for="(item,index) in guanzhu.list" :key="index">
								<common-list :item='item' :index='index' @del='del'></common-list>
							</block>
						</view>
						<loadMore :loadtext="guanzhu.loadtext"></loadMore>
					</scroll-view>
				</swiper-item>

				<!-- 话题 -->
				<swiper-item class="swiper-item">
					<scroll-view class="scroll-v list scroll-Y" enableBackToTop="true" scroll-y >
						<!-- 搜索 -->
						<view class="search_input">
							<input class="uni-input" placeholder="搜索内容" placeholder-class="search_input_placeholder icon iconfont icon-sousuo" />
						</view>
						<!-- 轮播图 --> 
						<swiper class="swiper topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
							<block v-for='(item,index) in topic.swiperList' :key='index'>
								<swiper-item>
									<image :src="item.src" mode="widthFix"></image>
								</swiper-item>
							</block>
						</swiper>
						<!-- 热门分类 -->
						<topic-nav :nav='topic.nav'></topic-nav>
						<!-- 最近更新 -->
						<topic-new :list='topic.list'></topic-new>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import commonList from '../../components/common-list/common-list.vue'
	import newsNavBar from '../../components/news/news-nav-bar.vue'
	import loadMore from '../../components/common/load-more.vue'
	import topicNav from '../../components/news/topic-nav.vue'
	import topicNew from '../../components/news/topic-new.vue'
	export default {
		data() {
			return {
				topic: {
					swiperList: [{
							src: "../../static/demo/banner3.jpg"
						},
						{
							src: "../../static/demo/banner1.jpg"
						},
						{
							src: "../../static/demo/banner2.jpg"
						},
					],
					nav: [{
							name: "最新"
						},
						{
							name: "游戏"
						},
						{
							name: "情感"
						},
						{
							name: "打卡"
						},
						{
							name: "故事"
						},
						{
							name: "喜爱"
						},
					],
				list:[
					{
						titlepic:"../../static/demo/topicpic/12.jpeg",
						title:'#淘宝记录簿#',
						desc:"120斤到85斤 我的反转人生",
						totalnum:50,
						todaynum:10
					},
					{
						titlepic:"../../static/demo/topicpic/12.jpeg",
						title:'#淘宝记录簿#',
						desc:"120斤到85斤 我的反转人生",
						totalnum:50,
						todaynum:10
					},
					{
						titlepic:"../../static/demo/topicpic/12.jpeg",
						title:'#淘宝记录簿#',
						desc:"120斤到85斤 我的反转人生",
						totalnum:50,
						todaynum:10
					},
					{
						titlepic:"../../static/demo/topicpic/12.jpeg",
						title:'#淘宝记录簿#',
						desc:"120斤到85斤 我的反转人生",
						totalnum:50,
						todaynum:10
					},
					{
						titlepic:"../../static/demo/topicpic/12.jpeg",
						title:'#淘宝记录簿#',
						desc:"120斤到85斤 我的反转人生",
						totalnum:50,
						todaynum:10
					},
					{
						titlepic:"../../static/demo/topicpic/12.jpeg",
						title:'#淘宝记录簿#',
						desc:"120斤到85斤 我的反转人生",
						totalnum:50,
						todaynum:10
					},
				]
				},
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [{
						name: '关注',
						id: 'guanzhu'
					},
					{
						name: '话题',
						id: "huati"
					}
				],
				guanzhu: {
					loadtext: '上拉加载更多...',
					list: [
						// 视频
						{
							userpic: '../../static/demo/userpic/4.jpg',
							username: '哈哈',
							sex: 0, // 0 男，1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/datapic/9.jpg',
							video: {
								looknum: "20w",
								long: '2:47'
							},
							share: false,
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						},
						// 分享
						{
							userpic: '../../static/demo/userpic/7.jpg',
							username: '哈哈',
							sex: 0, // 0 男，1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '',
							video: false,
							share: {
								title: '我是分享标题',
								titlepic: '../../static/demo/datapic/42.jpg'
							},
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						},
						{
							userpic: '../../static/demo/userpic/6.jpg',
							username: '哈哈',
							sex: 0, // 0 男，1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/datapic/10.jpg',
							video: {
								looknum: "20w",
								long: '2:47'
							},
							share: false,
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						},
						{
							userpic: '../../static/demo/userpic/6.jpg',
							username: '哈哈',
							sex: 0, // 0 男，1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/datapic/7.jpg',
							video: {
								looknum: "20w",
								long: '2:47'
							},
							share: false,
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						},
					]
				}

			}
		},
		components: {
			newsNavBar,
			commonList,
			loadMore,
			topicNav,
			topicNew
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(90);
				}
			})
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			},
			changeIndex(e) {
				this.tabIndex = e.detail.current
			},
			// 上拉加载更多
			loadMore() {
				console.log('shangl')
				// let obj = {
				// 			userpic: "../../static/demo/userpic/11.jpg",
				// 			username: "撸大师",
				// 			isguanzhu: true,
				// 			title: "动态标题",
				// 			type: "video", //img : 图文   video: 视频
				// 			titlepic: "",
				// 			infonum: {
				// 				index: 2, //0:没有关注  1：赞  2：踩
				// 				dingnum: 11,
				// 				cainum: 2
				// 			},
				// 			commentnum: 10,
				// 			sharenum: 66
				// 		}
				if (this.guanzhu.loadtext !== '上拉加载更多...') {
					return;
				}
				this.guanzhu.loadtext = '加载中'
				console.log(this.guanzhu.loadtext)
				// this.guanzhu.loadtext = '没有更多'
				setTimeout(() => {
					let obj = {
						userpic: '../../static/demo/userpic/4.jpg',
						username: '哈哈',
						sex: 0, // 0 男，1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/9.jpg',
						video: {
							looknum: "20w",
							long: '2:47'
						},
						share: false,
						path: "深圳 龙岗",
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					}
					this.guanzhu.list.push(obj)
					this.guanzhu.loadtext = '上拉加载更多...'
				}, 1000);
			},
		}
	}
</script>

<style>

	 

	.scroll-h {
		width: 750upx;
		height: 80upx;
		flex-direction: row;
		white-space: nowrap;
	}

	.line-h {
		height: 1upx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34upx;
		padding-right: 34upx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30upx;
		height: 80upx;
		line-height: 80upx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: row;
	}

	.scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750upx;
	}


	/* 话题 */
	.search_input {
		padding: 20upx;
	}

	.search_input input {
		background: #F4F4F4;
		border-radius: 10upx;
		padding: 15upx 30upx;
	}

	.search_input_placeholder {
		display: flex;
		justify-content: center;
		font-size: 27upx;
	}

	.topic-swiper {
		padding: 0 20upx 20upx 20upx;
	}

	.topic-swiper image {
		width: 100%;
		border-radius: 10upx;
		/* height: 100%; */
	}

	
	/* 最近更新 */
	
</style>
